<template>
	<view class="custom-tabbar">
		<!-- 左侧白色填充 -->
		<view class="side-white left"></view>
		<!-- 右侧白色填充 -->
		<view class="side-white right"></view>

		<!-- 背景图：固定宽度、居中、中间透明 -->
		<view class="tabbar-background"></view>

		<!-- 左侧 2 个 tab -->
		<view v-for="(item, index) in leftTabs" :key="index" class="tab-item" :class="{ active: current === index }"
			@click="switchPage(item.pagePath, index)">
			<image :src="current === index ? item.selectedIcon : item.normalIcon" class="tab-icon" mode="aspectFit" />
			<text class="tab-text" :class="{ active: current === index }">{{ item.text }}</text>
		</view>

		<!-- 中间占位 -->
		<view class="center-placeholder"></view>

		<!-- 右侧 2 个 tab -->
		<view v-for="(item, index) in rightTabs" :key="index + 2" class="tab-item"
			:class="{ active: current === index + 2 }" @click="switchPage(tabList[index + 2].pagePath, index + 2)">
			<image :src="current === index + 2 ? item.selectedIcon : item.normalIcon" class="tab-icon"
				mode="aspectFit" />
			<text class="tab-text" :class="{ active: current === index + 2 }">{{ item.text }}</text>
			<text v-if="index==0 && messagecount > 0" class="messageCount">{{messagecount}}</text>
		</view>

		<!-- 悬浮圆形按钮 -->
		<view class="center-btn" :class="{ active: isCenterActive }" @click="onCenterClick"
			@touchstart="isCenterActive = true" @touchend="isCenterActive = false"
			@touchcancel="isCenterActive = false">
			<view class="circle-btn">
				<text class="plus-icon">+</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'CustomTabBar',
	props: {
		current: {
			type: Number,
			default: 0
		},
		messagecount: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			isCenterActive: false,
			tabList: [
				{
					text: '首页',
					pagePath: '/pages/base/index/index',
					normalIcon: '/static/base/tablebar/index.png',
					selectedIcon: '/static/base/tablebar/index-active.png'
				},
				{
					text: '设计师',
					pagePath: '/pages/base/designer/index',
					normalIcon: '/static/base/tablebar/designer.png',
					selectedIcon: '/static/base/tablebar/designer-active.png'
				},
				{
					text: '消息',
					pagePath: '/pages/base/message/index',
					normalIcon: '/static/base/tablebar/message.png',
					selectedIcon: '/static/base/tablebar/message-active.png'
				},
				{
					text: '我的',
					pagePath: '/pages/base/user-center/index',
					normalIcon: '/static/base/tablebar/my.png',
					selectedIcon: '/static/base/tablebar/my-active.png'
				}
			]
		}
	},
	computed: {
		leftTabs() {
			return this.tabList.slice(0, 2);
		},
		rightTabs() {
			return this.tabList.slice(2, 4);
		}
	},
	methods: {
		//已经一处tablebar配置，不能使用switchBar
		switchPage(path, index) {
			if (this.current === index) return;
			//redirectTo不保留历史栈，避免用户点“返回”上一个 Tab ，uni.navigateTo会放入历史栈
			uni.redirectTo({ url: path });
		},
		onCenterClick() {
			uni.navigateTo({ url: '/pages/base/publish/index' });
		}
	}
}
</script>

<style scoped>
.custom-tabbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 151rpx;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	z-index: 999;
	padding: 0 35rpx;
	padding-bottom: 14rpx;
	/* 关键：主容器背景透明！ */
	background: transparent;
}

/* 白色侧边填充 */
.side-white {
	position: absolute;
	bottom: 0;
	top: 0;
	background-color: #ffffff;
	z-index: 0;
}

.side-white.left {
	left: 0;
	right: 50%;
	transform: translateX(-325rpx); /* 187.5px → 325rpx */
}

.side-white.right {
	right: 0;
	left: 50%;
	transform: translateX(325rpx); /* 187.5px → 325rpx */
}

/* 背景图：固定 395px 宽，居中 */
.tabbar-background {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 685rpx; /* 395px → 685rpx */
	height: 151rpx; /* 87px → 151rpx */
	background-image: url('/static/base/tablebar/tablebar-bg.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center bottom;
	z-index: 1;
}


/* Tab 项 */
.tab-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 18%;
	height: 121rpx; /* 70px → 121rpx */
	padding: 14rpx 0; /* 8px → 14rpx */
	z-index: 10;
	position: relative;
}

.tab-icon {
	width: 52rpx; /* 30px → 52rpx */
	height: 52rpx;
	margin-bottom: 7rpx; /* 4px → 7rpx */
}

.tab-text {
	font-size: 24rpx; /* 14px → 24rpx */
	color: #999999;
}

.tab-text.active {
	color: #ff7b3d;
	font-weight: 500;
}

.center-placeholder {
	width: 18%;
	height: 104rpx; /* 60px → 104rpx */
}

/* 悬浮按钮 */
.center-btn {
	position: absolute;
	bottom: 61rpx; /* 35px → 61rpx */
	left: 50%;
	transform: translateX(-50%);
	width: 146rpx; /* 84px → 146rpx */
	height: 141rpx; /* 81px → 141rpx */
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	transition: transform 0.2s ease;
}

.center-btn.active {
	transform: translateX(-50%) scale(0.95);
}

.circle-btn {
	width: 118rpx;
	height: 118rpx; /* 68px → 118rpx（你原写 68px，应统一）*/
	border-radius: 50%;
	background: linear-gradient(135deg, #ff9a56, #ff7b3d);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 7rpx 21rpx rgba(255, 123, 61, 0.3); /* 4px→7rpx, 12px→21rpx */
}

.center-btn.active .circle-btn {
	background: linear-gradient(135deg, #ff8c45, #ff6b2d);
}

.plus-icon {
	color: #fff;
	font-size: 92rpx; /* 53px → 92rpx */
	margin-bottom: 12rpx; /* 7px → 12rpx */
	font-weight: 200;
	line-height: 1;
}
.messageCount{
	float: right;
	position: absolute;
	top: 0px;
	right: 23rpx;
	font-size: 28rpx;
	color: white;
	text-align: center;
	font-weight: bold;
	background-color: #ff7b3d;
	line-height: 38rpx;
	height: 38rpx;
	width: 38rpx;
	border-radius: 19rpx;
}
</style>